@model GamesPlayModel

@{
    var action = "";
    var isActive = Model.IsActive;
    var index = 1;
}

<ol>
    @foreach (var tile in Model.PlayerTiles) {
        action = tile.CanGuess(Model.Player)
            ? "Guess"
            : tile.CanChangeState(Model.Player)
                ? "ChangeTileState"
                : "";
        
        <li class="tile @(tile.IsOpen ? "open" : "closed")@(isActive ? " active" : "")">
            @using (Html.BeginForm(action, "Games", new { id = Model.Game.GameID })) {
            <div class="inner">
                <input type="hidden" name="tileId" value="@tile.CharacterID" />
                @if (isActive) {
                       var verb = Model.Game.IsWaitingForNextTurn ?
                           (tile.IsOpen ? "Close" : "Open") : (tile.IsOpen ? "Guess" : "Open");
                       var imageTooltip = Model.Game.IsWaitingForNextTurn ?
                           (tile.IsOpen ? "Close" : "Open") + " this tile" :
                             (tile.IsOpen ? "Guess this person" : "Open this tile");
                    <input type="image" src="@Url.Content(tile.Character.Image)"
                        alt="@tile.Character.Name" title="@imageTooltip" accesskey="@(index++)" />
                    <p class="info">Click to @verb!</p>
                }
                else {
                    <img src="@Url.Content(tile.Character.Image)" alt="@tile.Character.Name" title="" />
                }
                <p class="name">@tile.Character.Name</p>
            </div>
            }
        </li>
    }
</ol>